//页面中所有的数据
var data = [
  {
    id: 1,
    number: "20220704003",
    name1: "王志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 2,
    number: "20220704002",
    name1: "孙志立",
    name2: "孙志元",
    time: "2021-5-18 14:54:24",
  },
  {
    id: 3,
    number: "20220704001",
    name1: "王阳阳",
    name2: "孙志元",
    time: "2021-5-18 14:54:30",
  },
  {
    id: 4,
    number: "20220703005",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:20",
  },
  {
    id: 5,
    number: "20220703004",
    name1: "孙志立",
    name2: "孙志元",
    time: "2021-5-18 14:54:14",
  },
  {
    id: 6,
    number: "20220703003",
    name1: "王穿越",
    name2: "孙志元",
    time: "2021-5-18 14:54:33",
  },
  {
    id: 7,
    number: "20220703002",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:25",
  },
  {
    id: 8,
    number: "20220703001",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:25",
  },
  {
    id: 9,
    number: "20220704003",
    name1: "王志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 10,
    number: "20220704002",
    name1: "孙志立",
    name2: "孙志元",
    time: "2021-5-18 14:54:26",
  },
  {
    id: 11,
    number: "20220704001",
    name1: "王阳阳",
    name2: "孙志元",
    time: "2021-5-18 14:54:26",
  },
  {
    id: 12,
    number: "20220703005",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 13,
    number: "20220703004",
    name1: "孙志立",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 14,
    number: "20220703003",
    name1: "王穿越",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 15,
    number: "20220703002",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 16,
    number: "20220703001",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 17,
    number: "20220704003",
    name1: "王志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 18,
    number: "20220704002",
    name1: "孙志立",
    name2: "孙志元",
    time: "2021-5-18 14:53:27",
  },
  {
    id: 19,
    number: "20220704001",
    name1: "王阳阳",
    name2: "孙志元",
    time: "2021-5-18 14:55:30",
  },
  {
    id: 20,
    number: "20220703005",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:30",
  },
  {
    id: 21,
    number: "20220703004",
    name1: "孙志立",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 22,
    number: "20220703003",
    name1: "王穿越",
    name2: "孙志元",
    time: "2021-5-18 14:54:27",
  },
  {
    id: 23,
    number: "20220703002",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:28",
  },
  {
    id: 24,
    number: "20220703001",
    name1: "刘志勇",
    name2: "孙志元",
    time: "2021-5-18 14:54:28",
  },
];
//当前的页码
var page = 1;
//每页的条数
var count = 5;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取上一页的按钮
var oPrevBtn = document.querySelector(".prev");
//获取下一页的按钮
var oNextBtn = document.querySelector(".next");
//页面初始化的渲染功能
var oPagination = document.querySelector(".pagination");
//获取搜索框
var oSearchInp = document.querySelector(".searchInp");
var oSearchInp1 = document.querySelector(".searchInp1");
var oSearchInp2 = document.querySelector(".searchInp2");
//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
//获取重置按钮
var oResetBtn = document.querySelector(".resetBtn");
//获取保存按钮
var oAddSaveBtn = document.querySelector(".addSaveBtn");
function render() {
  //查看搜索框的内容
  var str1 = oSearchInp.value;
  var str2 = oSearchInp1.value;
  var str3 = oSearchInp2.value;
  var searchData = []; //最终用来渲染的；
  var data1 = [];
  var data2 = [];
  for(var i=0;i<length;i++){
    data[i].id=i+1;
  }

  //判断第一个搜索条件
  if (str1.trim() == "") {
    //没有搜索内容
    data1 = data;
  } else {
    for (var i = 0; i < data.length; i++) {
      if (data[i].number == str1) {
        data1.push(data[i]);
      }
    }
  }
  if (str2.trim() == "") {
    data2 = data1;
  } else {
    for (var i = 0; i < data1.length; i++) {
      if (data1[i].name1.includes(str2)) {
        data2.push(data1[i]);
      }
    }
  }
  if (str3.trim() == "") {
    searchData = data2;
  } else {
    for (var i = 0; i < data2.length; i++) {
      if (data2[i].time.includes(str3)) {
        searchData.push(data2[i]);
      }
    }
  }

  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData.slice((page - 1) * count, page * count);
  //循环渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    //给tr创建内容
    oTr.innerHTML = `<td>${renderArr[i].id}</td>
    <td>${renderArr[i].number}</td>
    <td>${renderArr[i].name1}</td>
    <td>${renderArr[i].name2}</td>
    <td>${renderArr[i].time}</td>
    <td>
            <button class="btn btn-danger del">删除</button>
        </td>`;
    oTBody.appendChild(oTr);
  }

  //渲染页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  //删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
    if (i == page) {
      oLi.classList.add = ("active");
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
//页面开始渲染
render();

//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  if (event.target.className == "pageBtn") {
    //修改全局page
    page = event.target.innerText;
    //渲染table
    render();
  }
}
//给上下页加事件
oPrevBtn.addEventListener("click", prev);
oNextBtn.addEventListener("click", next);
function prev() {
  if (page > 1) {
    page--;
    render();
  }
}
function next() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}
//删除
oTBody.addEventListener("click", del);
function del() {
  if (event.target.className.includes("del")) {
    //找id
    var id = event.target.parentNode.parentNode.children[0].innerText;
    //循环数据对比
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        //删除id对应的数据
        data.splice(i, 1);
      }
    }
    //重新渲染
    render();
  }
}

//搜索
oSearchBtn.addEventListener("click", searchFn);

function searchFn() {
  page = 1;
  render();
}
//重置
oResetBtn.addEventListener("click", resetFn);
function resetFn() {
  oSearchInp.value = "";
  oSearchInp1.value = "";
  oSearchInp2.value = "";
  render();
}
//保存
oAddSaveBtn.addEventListener("click", addFn);
function addFn() {
  var addId = document.querySelector(".addId");
  var addNumber = document.querySelector(".addNumber");
  var addName1 = document.querySelector(".addName1");
  var addName2 = document.querySelector(".addName2");
  var addTime = document.querySelector(".addTime");

  data.push({
    id: addId.value,
    number: addNumber.value,
    name1: addName1.value,
    name2: addName2.value,
    time: addTime.value,
  });
  addId.value = "";
  addNumber.value = "";
  addName1.value = "";
  addName2.value = "";
  addTime.value = "";
  //隐藏模态框
  $("#addModel").modal("hide");
}
